// pages/Public/IndexPage
import React, { useState } from 'react';
import { Box, Typography, ThemeProvider } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled';
import { styled } from '@mui/material/styles';
import theme from 'themes/Theme';

const StyledTypography = styled(Typography)(({ darkMode }) => ({
  fontWeight: 700,
  fontSize: '2.5rem',
  fontFamily: 'Roboto Condensed',
  position: 'relative',
  display: 'inline-block',
  letterSpacing: '-1px',
  padding: 0,
  minHeight: 0,
  height: 'auto',
  lineHeight: 0.9,
  borderRadius: 20,
  border: 'none',
  textTransform: 'none',
  color: darkMode ? 'white' : 'black',
  transition: 'transform 0.3s ease',
}));

const StyledPlayIcon = styled(PlayCircleFilledIcon)(({ darkMode }) => ({
  fontSize: '5rem',
  color: darkMode ? 'white' : 'black',
  transition: 'transform 0.3s ease, color 0.3s ease',
}));

// Transition overlay
const BlurOverlay = styled(Box)(({ isActive }) => ({
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(255, 255, 255, 0.3)',
  backdropFilter: 'blur(30px)',
  opacity: isActive ? 1 : 0,
  visibility: isActive ? 'visible' : 'hidden',
  transition: 'opacity 2s ease, visibility 2s ease',
  zIndex: 100,
}));

const TextLine = ({ text, darkMode, indent = 0 }) => (
  <Box sx={{ 
    display: 'flex', 
    justifyContent: 'flex-end', 
    ml: `${indent}px`,
    marginBottom: '-5px', // Negative margin to pull lines closer together
  }}>
    <StyledTypography darkMode={darkMode}>
      <span>{text}</span>
    </StyledTypography>
  </Box>
);

const IndexPage = () => {
  const darkMode = false;
  const navigate = useNavigate();
  const [showOverlay, setShowOverlay] = useState(false);
  
  const handlePlayClick = (e) => {
    e.preventDefault();
    setShowOverlay(true);
    
    // Wait for transition to complete before navigating
    setTimeout(() => {
      navigate('/home-page');
    }, 2000); // Match this to the transition duration
  };

  return (
    <ThemeProvider theme={theme}>
      <BlurOverlay isActive={showOverlay} />
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh',
          width: '100%',
          backgroundColor: darkMode ? '#121212' : '#f5f5f5',
        }}
      >
        <Box sx={{ display: 'flex', justifyContent: 'center', maxWidth: '800px', padding: '20px' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0 }}>
            <Box sx={{ 
              display: 'flex', 
              flexDirection: 'column', 
              alignItems: 'flex-end',
            }}>
              <TextLine text="STARTER" darkMode={darkMode} indent={0} />
              <TextLine text="SAAS" darkMode={darkMode} indent={40} />
              <TextLine text="KIT" darkMode={darkMode} indent={80} />
              <TextLine text=".COM" darkMode={darkMode} indent={40} />
            </Box>
            <Box sx={{ display: 'flex', alignItems: 'center', pl: 0 }}>
              <a 
                href="/features-page" 
                onClick={handlePlayClick}
                style={{ 
                  display: 'flex', 
                  alignItems: 'center', 
                  textDecoration: 'none', 
                  cursor: 'pointer' 
                }}
              >
                <StyledPlayIcon darkMode={darkMode} />
              </a>
            </Box>
          </Box>
        </Box>
      </Box>
    </ThemeProvider>
  );
};

export default IndexPage;